<template>
  <div class="down_mian">
    <div class="down_wrap">
      <div class="down_header">支付订单</div>
      <div class="down_lxr">
        <div class="list_titel">
          订单提交成功, 共生成 <span style="color: #ff0000">1</span> 笔订单,
          请尽快付款!
        </div>
        <!-- <div class="list_titel">
          订单号：<span style="margin-left: 10px; color: #000">{{
            data.orderNum
          }}</span>
        </div>
        <div class="list_titel">
          联系人姓名：<span style="margin-left: 10px; color: #000">{{
            data.linkName
          }}</span>
        </div>
        <div class="list_titel">
          联系电话：<span style="margin-left: 10px; color: #000">{{
            data.linkPhone
          }}</span>
        </div> -->
      </div>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label"> 展会名称： </template>
          {{ stam.exhibitionName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 搭建商名称： </template>
          {{ stam.exhibitionCompany }}
        </el-descriptions-item> 
                 <el-descriptions-item>
          <template slot="label"> 展位名称： </template>
          {{ stam.standName }}
        </el-descriptions-item>
         <el-descriptions-item>
          <template slot="label"> 联系人： </template>
          {{ data.linkName }}
        </el-descriptions-item>
         
        <el-descriptions-item>
          <template slot="label"> 展馆号： </template>
          {{ stam.exNumber }}
        </el-descriptions-item>
           <el-descriptions-item>
          <template slot="label"> 联系方式： </template>
          {{ data.linkPhone }}
        </el-descriptions-item>
  <el-descriptions-item>
          <template slot="label"> 展位号： </template>
          {{ stam.standNum }}
        </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label"> 订单编号： </template>
          {{ data.orderNum }}
        </el-descriptions-item>

      
       
     
      
      
        <el-descriptions-item>
          <template slot="label"> 展位面积： </template>
          {{ stam.standArea }}
        </el-descriptions-item>
         <el-descriptions-item>
          <template slot="label"> 订单日期： </template>
          {{ data.orderTime }}
        </el-descriptions-item>
      </el-descriptions>
        <div class="contacts_ceten">
            <div class="contactsdata">服务项目</div>
            <div class="contacts_form">
                <el-table :data="data.fixedGoodsItem" style="width: 100%">
                    <el-table-column prop="goodsName" label="商品名称">
                    </el-table-column>
                    <el-table-column prop="sizeName" label="规格名称">
                    </el-table-column>
                    <el-table-column prop="sellingPrice" label="单价">
                    </el-table-column>
                    <el-table-column prop="goodsCount" label="商品数量">
                    </el-table-column>
                    <el-table-column label="商品总价">
                        <template slot-scope="scope">
                            {{ scope.row.sellingPrice * scope.row.goodsCount }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="contacts_ceten">
            <div class="contactsdata">保证金</div>
            <div class="contacts_form">
                <el-table :data="data.guarateeGoodsItem" style="width: 100%">
                    <el-table-column prop="goodsName" label="商品名称">
                    </el-table-column>
                    <el-table-column prop="sizeName" label="规格名称">
                    </el-table-column>
                    <el-table-column prop="sellingGuarantee" label="单价">
                    </el-table-column>
                    <el-table-column prop="goodsCount" label="商品数量">
                    </el-table-column>
                    <el-table-column label="商品总价">
                        <template slot-scope="scope">
                            {{ scope.row.sellingGuarantee * scope.row.goodsCount}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="liqui_foot">
            <div class="liqui_dation">
                <div>服务项目合计:</div>
                <div class="loqui_dation_text">{{ data.userfeeTotal }}元</div>
            </div>
            <div class="liqui_dation">
                <div>押金总计:</div>
                <div class="loqui_dation_text">{{ data.guaranteeTotal }}元</div>
            </div>
        <div class="liqui_dation">
          <div>订单总计:</div>
          <div class="loqui_dation_text">{{ data.orderAmount }}元</div>
        </div>
        <div class="liqui_dation">
          <el-button @click="hanldgo" type="danger">确定支付</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken, setToken, removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      leaselist: [
        {
          id: 1,
          ddh: "11111111111",
          zwh: "1212",
          peci: "12",
          zt: "未支付",
          ceadtime: "2022-1-30 10:12:32",
        },
      ],
      data: {},
      stam: {},
      exhibition: {},
    };
  },
  activated() {
    this.stam = JSON.parse(getToken("stan"));
    this.exhibition = JSON.parse(getToken("exhibition"));
    console.log(this.stam);
    console.log(this.exhibition);
    let formdata = this.$route.query.data;
    console.log('formdata',formdata)
    if (formdata) {
      this.data = formdata;
    }
  },
  methods: {
    hanldgo() {
     // removeToken("exhibition");
      this.$router.push({
        path: "/feeOfflinePayment",
        query: {
          paydata: this.data,
        },
      });
    },
  },
};
</script>
<style scoped>
.down_mian {
  background-color: #f2f2f2;
  padding: 20px;
  min-height: 430px;
}
.down_wrap {
  width: 1100px;
  margin: auto;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f2f2f2;
}
.down_header {
  padding: 20px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 20px;
  font-weight: bold;
}
.list_titel {
  font-size: 16px;
  margin-top: 20px;
  color: #666;
}
.dation {
  font-weight: bold;
}
.detion_list {
  margin-top: 20px;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0;
}
.pice {
  color: #ff0000;
}
.contacts_ceten {
  padding: 20px 0;
}
.contactsdata {
  font-size: 20px;
}
.liqui_dation {
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.loqui_dation_text {
  margin-left: 20px;
  color: #ff0000;
}
.liqui_foot {
  margin-top: 20px;
}
.down_lxr {
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}
/deep/.el-table th.el-table__cell {
  background-color: #e4fafa !important;
  text-align: center !important;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
</style>